{% extends "/shared/layout.html" %}
{% block mainContent %}
{% if userGroupRole == 1 or userGroupRole == 2 %}
  {% include '/social/group_edit_partial.html' %}
{% else %}
  <div class="header">
  <input id="txtGroupId" type="hidden" value="{{groupInfo.groupId}}">
  <div class="wrapper">
    <ul>
      <li class="li_750">
        <div class="u_info">
          <a class="u_photo" href="###">
            <img src="{%- if(groupInfo.groupPhoto) -%} 
              {{groupInfo.groupPhoto}} 
              {%- else -%}
               ../static/images/photo.png 
               {%- endif -%}" alt=""/>
          </a>
          <div class="u_detail">
            <dl>
              <dd></dd>
              <dd>
                <em class="icon_name"></em>{{groupInfo.groupName}}
              </dd>
              <dd id="groupRegion">
                <em class="icon_location"></em>
              </dd>
              <dd>
                <em class="icon_openness"></em>
                {% if(groupInfo.groupOpenness == 1) %}
                  {{pageRes.lblPublicGroup}}
                {% else %}
                  {{pageRes.lblPrivateGroup}}
                {% endif %}
              </dd>
            </dl>
            <div class="operate_btn">
              {% if userGroupRole == 3 %}
                <a id="btnQuit" href="###" class="button">{{pageRes.linkQuit}}</a>
              {% else %}
                <a id="btnJoin" href="###" class="button">{{pageRes.linkJoin}}</a>
              {% endif %}
              <!-- <a href="###" class="button">举报</a> -->
            </div>
          </div>
        </div>
      </li>
      <li class="li_250">
        <div class="u_group">
          <div class="notice_bg">
            <div class="notice_content">
              <p>{{groupInfo.groupContent}}</p>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>
  <script type="text/javascript">
  $(function() {
    var location = "{{groupInfo.groupLocation}}",
        locationArray = location.split(',');

    var region = nsbase.ui.utility.getRegion(locationArray[0],locationArray[1]);
    var loaction = region.provName + (region.cityName? " · " + region.cityName: "");
    $("#groupRegion").append(loaction);
  });
</script>
{% endif %}
<div class="wrapper group_main">
  <div class="g_type">{{pageRes.lblGroupInfo}}</div>
  <div class="perf_item">
    <div class="item_list">
      <div class="item_content">
        <ul>
        <li>
            <div class="item_box1">
              <em class="item4">{{pageRes.lblGroupCalorie|safe}}</em>
              <br/>
              <span>{{groupKpi.calorie}}</span>{{groupKpi.calorieUnit}}
            </div>
          </li> 
          <li>
            <div class="item_box1">
              <em class="item1">{{pageRes.lblGroupRun|safe}}</em>
              <br/>
              <span>{{groupKpi.miles}}</span>{{layoutRes.unitKM}}
            </div>
          </li>
          <li>
            <div class="item_box1">
              <em class="item3">{{pageRes.lblGroupSleep|safe}}</em>
              <br/>
              <span>{{groupKpi.sleeptime}}</span>{{layoutRes.unitHour}}
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="g_type">{{pageRes.lblGroupStatis}}</div>
  <div id="itemChart" name="itemChart" class="chart_box">
      <div class="select_time">
        <ul>
          <!-- <li day-range="1"><a href="###">当天</a></li> -->
          <li day-range="7"><a href="###">{{pageRes.lblLast7}}</a></li>
          <li day-range="15"><a href="###">{{pageRes.lblLast15}}</a></li>
          <li day-range="0"><a href="###">{{pageRes.lblCustom}}</a></li>
        </ul>
        <div class="time_range">
          <div class="range_1">
            <input id="txtDatePicker" type="text" readonly="true" value="2013-12-13" />
          </div>
          <div class="range_0">
            <input id="txtStartDate" type="text" readonly="true" value="2013-12-13" /> {{pageRes.lblTo}} 
            <input id="txtEndDate" type="text" readonly="true" value="2013-12-13" />
          </div>
          <div class="range_7"></div>
          <div class="range_15"></div>
        </div>
      </div>
      <div class="select_kpi">
        <ul>
          <li class="selected" stat-type="calorie"><a href="###">{{layoutRes.unitCal}}</a></li>
          <li  stat-type="run"><a href="###">{{layoutRes.unitKM}}</a></li>
          <li  stat-type="step"><a href="###">{{layoutRes.unitStepNum}}</a></li>
        </ul>
      </div>
      <div class="chart chartContainer"></div>
  </div>
  <div id="group" class="g_type">{{pageRes.lblGroupMember}}
  </div>
  <div id="gridContainer"></div>
</div>
<script type="text/javascript" src="../static/scripts/views/social/etlinking.views.groupDetail.js"></script>
<script type="text/javascript">
  $(function() {
    nsbase.views.groupDetail.init();    
  });
</script>
{% endblock %}